// 国际化
import {defineComponent,h,ref} from "vue"
import { I18n } from "i18n-js";
import {has,set,get} from "lodash-es"


export const UII18n = defineComponent(() => {
    const i18n:any = get(window,GLOBAL_KEY);
    const langs:any = i18n.langs;
    return () => h('div',{class:"relative"},[
        h('div',{}),
        h('div',{class:"absolute w-fit h-fit shadow-md bg-#fff"},Array.from(langs).map(d => {}))
    ])
})

export const GLOBAL_KEY = "I18N"

export const Langs = ["zh-cn",'en','fr']

export class I18N{
    constructor(dict?:any,options?:any){
        if(dict){
            Object.keys(dict).forEach(k => {this.langs.add(k)})
        }
        let l:any = get(window,GLOBAL_KEY);
        if(l && l.addDict){
            this.i18n = l.i18n;
            if(dict){
                l.addDict(dict)
            }
        }else{
            this.i18n = new I18n(dict,options)
            set(window,GLOBAL_KEY,this);
            if(this.langs.size > 0){
                const lang = Array.from(this.langs)[0];
                this.setDefault(lang)
                this.setLocal(lang)
            }
            this.i18n.onChange(() => this.localChange())
            l = this;
        }
        

        
        return l as I18N
    }

    i18n:I18n;
    langs = new Set<string>()
    hooks = new Set<(local:string) => void>()
    locale = ref('')
    t(scope:any,options?:any){
        return this.i18n.t(scope,options);
    }

    ts(scope:string){
        return (s:string,o:any = {}) => {
            return this.t(s,{scope,...o})
        }
    }
    //
    tn(v:number,type:'currency'|'number'|'percentage' = 'currency'){
        return this.i18n.l(type,v)
    }
    //
    addDict(dict:any){
        this.i18n.store(dict)
        Object.keys(dict).forEach(k => {this.langs.add(k)})
    }

    async loadDict(api:() => Promise<any>){
        const dict = await api();
        this.addDict(dict)
    }

    getLocal(){
        return this.locale.value;
    }

    getDefaultLocal(){
        return this.i18n.defaultLocale;
    }

    setLocal(name:string){
        this.i18n.locale = name;
        this.locale.value = name;
        return this;
    }

    setDefault(name:string){
        this.i18n.defaultLocale = name;
        return this;
    }

    setLocals(name:string){
        this.setLocal(name).setDefault(name);
        return this;
    }

    addChangeHook(call:(local:string) => void){
        if(call && typeof call == 'function'){
            this.hooks.add(call)
        }
    }

    localChange(){
        for(const f of this.hooks){
            if(f && typeof f == 'function'){
                f(this.getLocal());
            } 
        }
    }

    resetLocalByStorage(key:string){
        const k = localStorage.getItem(key) as string
        if(this.langs.has(k)){
            this.setLocal(k);
        }
    }

    resetLocalByPath(){
        const path = location.pathname;
        for(const k of this.langs){
            if(path.includes(k)){
                this.setLocal(k);
                break;
            }
        }
    }

    resetLocalBySearch(key:string){
        const ss = location.search.replace('?','').split('&');
        for(const s of ss){
            const ts = s.split('=');
            if(ts[0] == key){
                this.setLocal(ts[1])
                break;
            }
        }
        
    }

}